<template>
  <a-card>
    <a-space class="operator">
      <!-- <a-button type="primary" v-on:click="add()">新建</a-button> -->
      <!-- <a-button >批量操作</a-button> -->
      <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">
          <!-- <a-menu-item key="delete">删除</a-menu-item>
            <a-menu-item key="audit">审批</a-menu-item> -->

          <!-- <a-menu-item key="toLead">
            <a-icon type="upload" />导入
            <input
              type="file"
              title=""
              @change="fileChange"
              v-show="false"
              id="upload"
            />
          </a-menu-item> -->

          <a-menu-item
            v-on:click="batchDel()"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="delete" />批量删除
          </a-menu-item>
          <!-- <a-menu-item
            v-on:click="batchStatus(1)"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="check-circle" />批量上架
          </a-menu-item>
          <a-menu-item
            v-on:click="batchStatus(0)"
            :disabled="selectedRowKeys.length < 1"
          >
            <a-icon type="stop" />批量下架
          </a-menu-item> -->
        </a-menu>
        <a-button> 批量操作 <a-icon type="down" /> </a-button>
      </a-dropdown>

      <!-- <a-dropdown>
        <a-menu @click="handleMenuClick" slot="overlay">
         

          <a-menu-item key="toLead">
            <a-icon type="upload" />导入
            <input
              type="file"
              title=""
              @change="fileChange"
              v-show="false"
              id="upload"
            />
          </a-menu-item>

          <a-menu-item key="toOut">
            <a-icon type="vertical-align-bottom" />导出
          </a-menu-item>
        </a-menu>
        <a-button> 更多操作 <a-icon type="down" /> </a-button>
      </a-dropdown> -->
    </a-space>
    <!-- <standard-table
        :columns="columns"
        :dataSource="dataSource"
        :selectedRows.sync="selectedRows"
        @clear="onClear"
        @change="onChange"
        @selectedRowChange="onSelectChange"
      >
        <div slot="description" slot-scope="{ text }">
          {{ text }}
        </div>
        <div slot="action" slot-scope="{ text, record }">
        </div>
        <template slot="statusTitle">
          <a-icon @click.native="onStatusTitleClick" type="info-circle" />
        </template>
      </standard-table> -->
    <!-- <div class="table-adv"> -->
    <advance-table
      :columns="columns"
      :data-source="dataSource"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :title="tableTitle"
      :loading="loading"
      rowKey="id"
      @search="onSearch"
      @refresh="onRefresh"
      :format-conditions="true"
      @reset="onReset"
      :bordered="true"
      :scroll="{ x: 1000 }"
      :pagination="false"
    >
      <!-- <template slot="statusTitle">
        状态<a-icon style="margin: 0 4px" type="info-circle" />
      </template> -->

      <template slot="tower_building_title" slot-scope="{ text }">
        {{ text.phone }}
        <a-tag
          style="margin-left: 5px"
          v-show="text.top_time"
          v-on:click="operate('onTop', text, true)"
          >置顶</a-tag
        >
      </template>
      <template slot="shelves" slot-scope="{ text }">
        <a-tag> {{ text ? "上架中" : "下架中" }} </a-tag>
      </template>
      <template slot="source_name" slot-scope="{ text }">
       {{ text.title }}  <a-tag> {{typeShow[text.type]}}</a-tag>
      </template>

      <template slot="images" slot-scope="{ text }">
        <oneImage
          see
          :imageUrl="text.avatarUrl"
          v-show="text.avatarUrl"
          style="width: 80px"
        />
      </template>
 <template slot="source" slot-scope="{ text }">
     <!-- {{text}} -->
      <span v-show="text.source == 'Wechat'">微信</span>
      <span v-show="text.source == 'Toutiao'">抖音</span>
      </template>
      <template slot="situation" slot-scope="{ text }">
     <!-- {{text}} -->
      <span v-show="text.situation == -1">跟进失败</span>
      <span v-show="text.situation == 0">未跟进</span>
      <span v-show="text.situation == 1">跟进中</span>
      <span v-show="text.situation == 2">跟进完成</span>
      </template>


 <template slot="custom" slot-scope="{ text }">
        <template v-if="text">
        
        <span
          v-for="(item, index) in JSON.parse(text)"
          :key="index"
          :title="`${item.field}:${item.content}`"
        >  
           {{item.field}}：{{item.content}}
           <br/>
        </span>
           

      </template>
        </template>
      
      <template slot="operation" slot-scope="{ text }">
        <div class="operation">
          <a href="javascript:;" v-on:click="operate('edit', text)">编辑</a>

          <a-popconfirm
            :title="`确定要${text.top_time ? '取消' : ''}置顶吗?`"
            @confirm="() => operate('onTop', text)"
          >
            <a href="javascript:;" v-show="text.top_time">取消置顶</a>
            <a href="javascript:;" v-show="!text.top_time">置顶</a>
          </a-popconfirm>
          <!-- <a-popconfirm
            :title="`确定要${text.shelves ? '下架' : '上架'}吗?`"
            @confirm="() => operate('shelves', text)"
          >
            <a href="javascript:;" v-show="text.shelves">下架</a>
            <a href="javascript:;" v-show="!text.shelves">上架</a>
          </a-popconfirm> -->
          <a-popconfirm
            :title="`确定要删除吗?`"
            @confirm="() => operateDel(text)"
          >
            <a href="javascript:;">删除</a>
          </a-popconfirm>
        </div>
      </template>
    </advance-table>

    <div class="show-right">
      <a-pagination
        :current="page"
        :pageSize="pageSize"
        :total="total"
        :showSizeChanger="true"
        :showLessItems="true"
        :showQuickJumper="true"
        :pageSizeOptions="['10', '20', '50', '100', '500', ...total.toString()]"
        :scroll="{ x: 1300 }"
        :showTotal="
          (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`
        "
        @change="onPageChange"
        @showSizeChange="onSizeChange"
        :loading="loading"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value == total">全部</span>
          <span v-else>{{ props.value }}条/页</span>
        </template>
      </a-pagination>
    </div>

    <!-- </div> -->
    <!-- <router-view> </router-view> -->
  </a-card>
</template>

<script>
// import StandardTable from "@/components/table/StandardTable";
import AdvanceTable from "@/components/table/advance/AdvanceTable";
// import { buildingList, buildingEdit ,buildingBatchEdit } from "@/services/building";
import oneImage from "@/components/uploadImages/oneImage";
import {subscribeList,subscribeBatchEdit,subscribeEdit} from "@/services/subscribe"
export default {
  name: "TeachingCulture",
  components: { AdvanceTable, oneImage },
  data() {
    return {
      loading: false, //表格是否加载中
      page: 1, //第几页
      pageSize: 10, //一页多少条
      total: 0, //总共多少条
      tableTitle: " ", //表格标题
      keyWord: {}, //关键词搜索
      selectedRowKeys: [], //批量操作
      columns: [
            
        //显示什么列
        {
          title: "联系电话",
          returnField: "like-subscribe-phone",
          scopedSlots: { customRender: "tower_building_title" },
          ellipsis: true,
          width:200,
          searchAble: true,
        },
         {
          title: "房源名称",
          returnField: "like-all-title",
          // dataIndex:"title",
           scopedSlots: { customRender: "source_name" },
          ellipsis: true,
          width:300,
          searchAble: true,
        },
         {
          title: "房源地址",
          returnField: "like-all-address",
          dataIndex:"address",
          ellipsis: true,
          width:300,
          searchAble: true,
        },
         {
          title: "头像",
          width: 100,
          ellipsis: true,
          notSearch: true,
          scopedSlots: { customRender: "images" },
        },
          {
          title: "微信/抖音昵称",
          width: 150,
          dataIndex: "nickName",
           returnField: "like-find_shop_user-nickName",
          ellipsis: true,
        },
        
         {
          title: "跟进情况",
          width: 120,
          ellipsis: true,
          scopedSlots: { customRender: "situation" },
          dataType: "select",

          returnField: "equal-subscribe-situation",
          searchAble: true,
          search: {
            selectOptions: [
              { value: -1, title: "跟进失败"},
              { value: 0, title: "未跟进"  },
              { value: 1, title: "跟进中"  },
              { value: 2, title: "跟进完成"},
            ],
          },
        },
        {
          title: "来源",
          width: 80,
          ellipsis: true,
          scopedSlots: { customRender: "source" },
          dataType: "select",
          returnField: "equal-find_shop_user-source",
          searchAble: true,
          search: {
            selectOptions: [
              { value: "Wechat", title: "微信" },
              { value: "Toutiao", title: "抖音" },
             
            ],
          },
        },
        {
          title: "操作",
          fixed: "right",
          notSearch: true,
          width: 200,
          scopedSlots: { customRender: "operation" },
        },
      ],
      typeShow:{
         'housing':'写字楼',
         'building':'大厦',
         'store':'店铺'
      },
      dataSource: [], //显示的数据
      conditions: {}, //条件
      visible: false, //导入弹出层
      fileFormData: {}, //文件上传预备
      confirmLoading: false, //导入按钮lading
      uploadForm: this.$form.createForm(this),
    };
  },
  authorize: {
    operate: "编辑",
    // batchStatus: "编辑",
    // add: "添加",
    operateDel: "删除",
    batchDel: "删除",
  },
  created() {
    // this.getColumns()
    this.tableLoad(); //表格查询
  },
  methods: {
    onSearch(conditions, searchOptions) {
      this.keyWord = conditions;
      this.page = 1;
      // this.conditions = conditions;
      this.tableLoad();
    },
    onSizeChange(current, size) {
      this.page = 1;
      this.pageSize = size;
      this.tableLoad();
    },
    onRefresh(conditions) {
      this.conditions = conditions;
      this.tableLoad();
    },
    onReset(conditions) {
      this.conditions = conditions;
      this.tableLoad();
    },
    onPageChange(page, pageSize) {
      this.page = page;
      this.pageSize = pageSize;
      this.tableLoad();
    },

  

    async tableLoad() {
      this.loading = true;
      const { page, pageSize, keyWord } = this;

      // console.log(teachingGoupByList);

      let teaching = await subscribeList({
        page: page,
        pageSize: pageSize,
        keyWord: keyWord,
      });
      //console.log(teaching);
      const { list, total } = teaching.data;
      this.dataSource = list;
      this.total = total;
      this.loading = false;
    },
    async operate(key, data, top = false) {
      const { sysTime, $message, tableLoad } = this;
      switch (
        key //置顶操作
      ) {
        case "onTop":
          $message.loading({ content: "修改中", key: "loading" });
          let res = await subscribeEdit({
            formData: { top_time: data.top_time && !top ? null : sysTime() },
            conditions:{id: data.id},
          });
          if (res.code == 200) {
            $message.success({
              content: "修改成功",
              key: "loading",
              duration: 2,
            });
            tableLoad();
          }

          break;
       
        case "edit":
          this.$router.push({
            path: "/findShop/subscribeEdit",
            query: { subscribe_id : data.id },
          });

          break;
      }
    },
    async operateDel(data) {
      const { sysTime, $message, tableLoad } = this;
      $message.loading({ content: "删除中", key: "loading" });
      let res = await subscribeEdit({
        formData: { delete_time: sysTime() },
         conditions:{id: data.id},
      });
      if (res.code == 200) {
        $message.success({
          content: "删除成功",
          key: "loading",
          duration: 2,
        });
        tableLoad();
      }
    },
    batchDel() {
      const { sysTime, $message, tableLoad, $confirm, selectedRowKeys } = this;
      const this_ = this
      $confirm({
        title: "确定要删除吗?",
        async onOk() {
          $message.loading({ content: "删除中", key: "loading" });
          let res = await subscribeBatchEdit({
            formData: { delete_time: sysTime() },
            id: selectedRowKeys,
          });
          if (res.code == 200) {
            $message.success({
              content: "删除成功",
              key: "loading",
              duration: 2,
            });
             this_.selectedRowKeys  = []
             tableLoad();
          }
        },
      });
    },
    
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys;
    },
    // async batchDel() {
    //   const { sysTime, $message, tableLoad } = this;
    //   $message.loading({ content: "删除中", key: "loading" });
    //   let res = await teachingUpdate({
    //     formData: { delete_time: sysTime() },
    //     id: this.selectedRowKeys,
    //   });
    //   if (res.code == 200) {
    //     $message.success({
    //       content: "删除成功",
    //       key: "loading",
    //       duration: 2,
    //     });
    //     tableLoad();
    //   }
    // },
    handleMenuClick(e) {
      if (e.key === "toLead") {
        //导入
        let upload = document.getElementById("upload");

        upload.click();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.table-adv {
  max-width: 100%;
  // border: 1px solid blue;
  overflow: auto;
  white-space: nowrap;
}

.show-right {
  float: right;
  margin-top: 10px;
}
.operation {
  display: flex;
  justify-content: space-between;
}
.over-one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
